<template>
  <div id="circelCard">
    <!-- 面授同步标题 -->
    <p v-if="courseInfo.maxtitle" class="title">{{courseInfo.maxtitle}}</p>
    <router-link :to="courseInfo.link">
      <!-- 首页矩形卡片组件 -->
    <Card  class="cardclass" >
      <div >
        <!-- 卡片顶部大图 -->
        <img :src="courseInfo.imgurl" class="imgURLclass" />
            
           <div>
               <div>  
                      <!-- 卡片标题 -->
                    <span class="listtitleClass">{{courseInfo.title}}</span>
                    <!-- 后面学习周期时间 -->
                    <span class="listtimeClass">周期： {{courseInfo.timecontent}}个月</span>
               </div>
               <div>
                            <!-- 描述内容 -->
                        <span class="listdescClass">{{courseInfo.description}}</span>
               </div>
           </div>
              <!-- 分割线组件 -->
           <Divider orientation="center" :dashed="true" size="small" style="margin:12px 0"/>
            
            <div>
                <span class="priceClass">
                      <!-- 价钱 -->
                    ¥ {{courseInfo.price}}
                    <i class="crossline">面授班原价 {{courseInfo.originalprice}}</i>
                </span>
            </div>
            
      </div>
    </Card>
  </router-link>
  </div>
</template>

<script>
//导入vue
import Vue from "vue";
//导入iview-ui  卡片,分隔条组件
import { Card, Divider } from "view-design";

export default {
  name: "circelCard",
  //传入属性名
  props: [
    'courseInfo'
  ],
  //组件注册
  components: {
    Card,
   Divider
  },
  data() {
    return {
      
    };
  },

  computed: {},

  watch: {},

  methods: {},

  created() {

  },

  mounted() {
    //挂载 更改局部UI样式
      let tempcard = document.getElementsByClassName('ivu-card-body')
      for(let i=0;i<tempcard.length;i++){
        tempcard[i].style = "padding:0px"
      }
      
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 局部的样式定义及覆盖UI局部样式 */
.title {
    margin: 10px 8%;
  font-size: 18px;
  color: #333;
  font-family: PingFangSC-Medium;
}
.cardclass{
    width:90%;
    margin: 0  auto 26px;
    border-radius: 0px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-width:0px;

}
.imgURLclass{
    width:100%;
    height:100%;
    
}

.listtitleClass{
    display: inline-block;
    margin: 15px 30px 15px 14px;
    font-size: 14px;
    color: #000;
}

.listtimeClass{
    display: inline-block;
    margin:15px 0 0 36px;
    font-size: 14px;
    color: #000;
}
.listdescClass{
    display: inline-block;
    font-size: 14px;
    color:#9b9b9b;
    margin-left: 15px;
}
.priceClass{
    display: inline-block;
    margin-left: 15px;
    margin-bottom: 12px;
    color:#fa6240;

}
.crossline{
    text-decoration:line-through;
    color:#9b9b9b;
}

</style>